<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="客户姓名">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="客户年龄">
      <el-input v-model="ruleForm.age"></el-input>
    </el-form-item>

    <el-form-item label="客户性别">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 保险产品 -->
    <el-form-item label="保险产品">
      <el-select v-model="ruleForm.insurancesId" placeholder="请选择保险产品">
        <el-option :value="item._id" v-for="item in product" :label="item.name" :key="item._id"></el-option>
      </el-select>
    </el-form-item>
    <!-- 保险险种 -->
    <el-form-item label="保险险种">
      <el-select v-model="ruleForm.insuranceTypeId" placeholder="请选择保险险种">
        <el-option :value="item._id" v-for="item in producttype" :label="item.name" :key="item._id"></el-option>
      </el-select>
    </el-form-item>
    <!-- 销售员 -->
    <el-form-item label="销售员">
      <el-select v-model="ruleForm.salesId" placeholder="请选择销售员">
        <el-option :value="item._id" v-for="item in sales" :label="item.username" :key="item._id"></el-option>
      </el-select>
    </el-form-item>
    <!-- 头像上传 -->
    <el-form-item>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:3000/images/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img
          v-if="this.ruleForm.avatarImg"
          :src="'http://localhost:3000/temp/'+ruleForm.avatarImg"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="add">确认新增</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions,mapState } = createNamespacedHelpers("cosutomers");
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        gender: "",
        age: "",
        avatarImg: "",
        insuranceTypeId: "",
        insurancesId: "",
        salesId:""
      },
    };
  },
  created(){
    this.getSales();
    this.getProductType();
    this.getProduct()
  },
  computed:{
    ...mapState(['sales','product',"producttype"])
  },
  methods: {
    ...mapActions(["addClients",'getSales',"getProduct","getProductType"]),
    add() {
      console.log("ruleForm", this.ruleForm);
      this.addClients(this.ruleForm);
      this.$router.push("/Customerslist");
    },
    //上传图片区域 图片上传成功
    handleAvatarSuccess(res) {
      if (res.status) {
        this.ruleForm.avatarImg = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.el-form {
  width: 300px;
}
.l-button {
  margin-top: 200px;
}

.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>